{extend name="public/base"/}
{block name="style"}
<!-- <link rel="stylesheet" href="__PUBLIC__/admin/book/css/index.css?v=20221110&times={:time()}" /> -->
<link rel="stylesheet" href="__PUBLIC__/admin/book/css/operate_help_baidu.css?v=20221110&times={:time()}" />
<link rel="stylesheet" href="__PUBLIC__/admin/material/css/iconfont.css" />
<link rel="stylesheet" href="__PUBLIC__/admin/upload_layui/css/index.css">
<link rel="stylesheet" href="/public/static/layui/css/layui.css">
{include file="material/_ali_icon" /}
<style>
    .main-box-body .navs .active {
		background: azure;
		color: #03a9f4;
		border: 1px solid #03a9f4;
		border-radius: 5px;
	}
</style>
{/block}
{block name="body"}
<div class="main-box clearfix">
	<div class="main-box-body clearfix">
		<div style="display:flex">
			<ul class="navs clearfix" style="margin: 10px 5px;font-size: 16px;">
				<!-- <li><a href="./operate_help.html" class="" style="color:#777">寄语</a></li> -->
				<li><a href="./operate_help_baidu.html" class="active">百度</a></li>
				<li><a href=""class=" " style="color:#777">抖音</a></li>
				<li><a href=""class=" " style="color:#777">微博</a></li>
				<li><a href=""class=" " style="color:#777">oppo</a></li>
				<li><a href=""class=" " style="color:#777">vivo</a></li>
				<li><a href=""class=" " style="color:#777">uc</a></li>
				<li><a href=""class=" " style="color:#777">腾讯</a></li>
				<li><a href=""class=" " style="color:#777">知乎</a></li>
				<li><a href=""class=" " style="color:#777">快手</a></li>
				<li><a href=""class=" " style="color:#777">B站</a></li>
				<li><a href=""class=" " style="color:#777">美柚</a></li>
				<li><a href=""class=" " style="color:#777">小红书</a></li>
				<li><a href=""class=" " style="color:#777">其他</a></li>
			</ul>
			<header class="main-box-header clearfix">
				<div class="pull-right">
					<button type="button" class="btn btn-primary btn-sm" id="createUrl">
						<i class="fa fa-plus"></i> 上传 <span class="caret"></span>
					</button>
				</div>
			</header>
		</div>
        <div class="row message">
            <!-- <div class="col-md-2 folder" id="demo1Box">
                <i class="iconfont icon-wenjianjia"></i>
                <span>文件名</span>
            </div> -->
            {volist name="list" id="vo"}
                {if $vo['type'] == 'image'}
                    <div class="col-md-2 file" data-type="{$vo.type}" data-url="{$vo.content_image}">
                        {if $vo.content_image !== ''}
                            <img src="{$vo.content}" alt="">
                        {else}
                            <i class="iconfont icon-_tupian"></i>
                        {/if}
                        <span>{$vo.title}</span>
                    </div>
                {else/}
                    <div class="col-md-2 file" data-type="{$vo.type}" data-url="{$vo.content_video}">
                        {if $vo.cover}
                        <img src="{$vo.cover}" alt="">
                        {else}
                        <i class="iconfont icon-shipin"></i>
                        {/if}
                        <span>{$vo.title}</span>
                    </div>
                {/if}
            {/volist}
        </div>
	</div>
    <div class="modal fade" id="look-modal">
        <div class="modal-dialog" role="document">
           <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                    <span style="font-size: 20px;"><span id="referralname">查看</span></span>
                </div>
                <div class="modal-body mediaContent">
                    
                </div>
           </div>
       </div>
    </div>
    <div class="modal fade" id="create-referral-link-modal">
        <div class="modal-dialog" role="document">
           <div class="modal-content">
               <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
                   <span style="font-size: 20px;"><span id="referralname">添加</span></span>
               </div>
               <div class="modal-body">
                   <div data-bind="visible: loading" class="loading-panel" style="display: none;">
                       <i class="fa fa-spin fa-spinner"></i>
                   </div>
                   <form class="form-horizontal modelform">
                        <div class="form-group">
                            <label class="control-label col-sm-2">标题</label>
                            <div class="col-sm-8">
                                <input type="text" class="form-control"  name="title" value="" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label col-sm-2">类型</label>
                            <div class="col-sm-8">
                                <label class="radio-inline">
                                    <input type="radio" name="type" value="image" checked>图片
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="type" value="video">视频
                                </label>
                            </div>
                        </div>
    
                        <div class="form-group imageBox" style="margin-bottom: 0;" id="imageBox">
                            <label class="control-label col-sm-2">图片</label>
                            <input type="hidden" name="content_image" id="image_content">
                            <div class="col-sm-8">
                                <button type="button" class="btn btn-primary" id="img_btn_single">上传</button>
                                <div class="layui-upload-list_image"></div>
                            </div>
                        </div>
                        <div class="form-group videoBox" style="margin-bottom: 0;display:none ;" id="videoBox">
                            <label class="control-label col-sm-2">视频</label>
                            <input type="hidden" name="content_video" id="video_content">
                            <div class="col-sm-8">
                                <button type="button" class="btn btn-primary" id="video_btn_single">上传</button>
                                <div class="layui-upload-list_video"></div>
                            </div>
                        </div>
                       <input type="hidden" class="layui-input content" name="cover" id="video_cover">

                   </form>
               </div>
               <div class="modal-footer">
                   <button type="button" id="createreferral" class="btn btn-primary ">提交</button>
               </div>
           </div>
       </div>
    </div>
</div>
{$page}
<script src="/public/plugs/BootstrapMenu/js/BootstrapMenu.js"></script>
<script>
    $('.file').on('click',function(){
		var $modal = $('#look-modal');
        let type = $(this).data('type')
        let url = $(this).data('url').split(',')[0]
        console.log(url)
		$modal.on('show.bs.modal', function () {
			if(type == 'image'){
                $('.mediaContent').html("<img src="+url+"  style='width:100%;max-height:600px'>")
            }else{
                $('.mediaContent').html("<video src="+url+" controls controlslist='nodownload' style='max-height:600px'></video>")
            }
            $('.mediaCover').html("<img src="+url+"  style='width:100%;max-height:600px'>")
		});	
		$modal.modal({backdrop: 'static', keyboard: false});
	});
    $('#createUrl').on('click',function(){
		// var is_rule = '{:checkAuthRule("add")}';
		// if(!is_rule){
		// 	layer.msg("你没权限添加");
		// 	return;
		// }
		var $modal = $('#create-referral-link-modal');
		$modal.modal({backdrop: 'static', keyboard: false});
	});
    $("#createreferral").on('click',function(){
		var data = $('.modelform').serializeJson();
		var url = "{:url('add')}";
        console.log(data)
		$.ajax({
			type: "POST",
			url,
			data,
			dataType: "json",
			success: function(data){
				if(data.code==1){
					updateAlert(data.msg, 'success');
					setTimeout(function() {	
						window.location.reload();
					}, 100);
				}else{
					updateAlert("添加，"+data.msg, 'danger');
				}
			}
		})
	});
    var menu = new BootstrapMenu('.folder', {
        actions: [{
            name: '编辑',
            onClick: function() {
                
            }
            }, {
            name: '删除',
            onClick: function() {
                
            }
        }]
    });

    $('input[name=type]').change(function(){
        if($(this).val() == 'image'){
            $('#imageBox').show()
            $('#videoBox').hide()
        }else{
            $('#imageBox').hide()
            $('#videoBox').show()
        }
    })
</script>
{include file="material_media/_pub_upload"}
<script>
    uploadFile({
        elem: '#img_btn_single',
        ossUrl: '/admin/material_ali_upload/sts',
        multiple: false,
        accept: 'image',
        acceptMime: 'image/*',
        uploadSuccessCallback: function (res) {
            $('.layui-upload-list').show()
            $("#image_content").val(res.url);
            $('.layui-upload-list_image').html(`
            <div class="imgBox">
                <i class="layui-icon layui-icon-close-fill" onclick='getUrl(this,"#image_content")'></i>   
                <img onclick="showimg(this)" class="layui-upload-img" style="width: 100px;" src=${res.url}>
            </div>
        `)
        },
        uploadErrorCallback: function () {
            return layer.msg('上传失败');
        }
    })
    uploadFile({
        elem: '#video_btn_single',
        ossUrl: '/admin/material_ali_upload/sts',
        multiple: false,
        accept: 'video',
        acceptMime: 'video/*',
        uploadSuccessCallback: function (res, name) {
            getVideoBase64(res.url).then((url) => {
                let client;
                var init = new Promise((resolve, reject) => {
                    // 请求oss sts临时授权接口
                    $.ajax({
                        url: '/admin/material_ali_upload/sts',
                        type: "post",
                        async: false,
                        success: function (data) {
                            client = new OSS({
                                accessKeyId: data.data.AccessKeyId,
                                accessKeySecret: data.data.AccessKeySecret,
                                stsToken: data.data.SecurityToken,
                                bucket: data.data.bucket,
                                region: data.data.region
                            })
                            resolve()
                        }
                    });
                });
                init.then(() => {
                    client.put(fileName(name.split('.')[0]), dataURLtoFile(url)).then(function (v) {
                        if (v.res.status === 200) { //上传成功
                            $('.layui-upload-list').show()
                            $("#video_content").val(res.url);
                            $("#video_title").val(name.split('.')[0]);
                            $("#video_cover").val(v.url);
                            $('.layui-upload-list_video').html(`
                                <div class="imgBox">
                                    <i class="layui-icon layui-icon-close-fill" onclick='getUrl(this,"#video_content")'></i>   
                                    <video controls class="layui-upload-img" style="width: 200px;" src=${res.url} >
                                </div>
                            `)
                        }
                    })
                });

            })

        },
        uploadErrorCallback: function () {
            return layer.msg('上传失败');
        }
    })
</script>
{/block}
